<template>
	<view class="home-page">
		<view class="home-page-swiperheader" @touchmove="move" @touchstart="start">
			<swiper class="swiper" circular :autoplay="true" interval="3000" duration="500" @change="swiperchange">
				<swiper-item v-for="(item,index) in swiperlist" :key="item.id">
					<img mode="aspectFill" :src="homeswiperlogo[index]?.img?.url" alt=""
						style="width: 100%;height: 100%;">
					<view class="page-swiperheader-title">
						<span>{{item.title}}</span>
					</view>
				</swiper-item>
			</swiper>
			<view class="home-page-btn" @click="goquestion">
				<img :src="queryImage(`homelogo1`)" alt="" class="page-btn-logo">
				<span>立即提问</span>
			</view>
			<view class="home-page2-btn" @click="goquestion2">

				<span>进入首页</span>
			</view>
			<view class="content-header-dots">
				<view class="header-dots" :class="dotindex === index ? 'header-dot-active' : ''"
					v-for="(item,index) in swiperlist" :key="item.id"></view>
			</view>
			<view class="swiperheader-bootom-dowm" @click="changedownblean">
				<span>下滑了解更多</span>
				<img :src="queryImage(`homelogo2`)" alt="" class="bootom-dowm-img">
			</view>
		</view>
		<view class="home-page-content" v-if="downblean">
			<!-- 搜索 -->
			<view class="home-content-search" @click="gosearch">
				<input type="text" placeholder="搜索关键字/答主/钢琴相关问题" class="content-search-inpt" disabled="true">
				<img mode="aspectFill" :src="queryImage(`homelogo3`)" alt="" class="content-search-logo">
			</view>
			<!-- banner -->
			<view class="home-content-banner">
				<img mode="aspectFill" :src="queryImage(`homelogo4`)" alt="" class="content-banner-logo">
			</view>
			<!-- 我要当答主 -->
			<view class="home-content-question">
				<view class="content-question-title">
					<span>如何快速提问，乐器学习问答社区</span>
				</view>
				<view class="content-question-body">
					<view class="question-body-list" v-for="(item,index) in questionlist" :key="item.id">
						<view class="body-list-left" :style="item.id=='3'?'justify-content: flex-end;':''">
							<img mode="aspectFill" :src="item.img" alt="" class="list-left-img"
								:style="item.id=='1'?'height:57rpx;width:76rpx':item.id=='3'?'width:63rpx':''">
						</view>
						<view class="body-list-midel" :style="item.id=='1'?'padding-left: 47rpx;':''">
							<img :src="queryImage(`homelogo8`)" alt="" class="list-midel-img"
								:style="item.id=='1'?'margin-top:102rpx':item.id=='2'?'margin-top:130rpx':''"
								v-if="item.id!='3'">
						</view>
						<view class="body-list-right">
							<view class="list-right-top">
								<span>{{item.next}}&nbsp;Tips</span>
							</view>
							<view class="list-right-nav">
								<span>{{item.title}}</span>
								<view class="right-nav-details">
									<span>查看详情</span>
								</view>
							</view>
							<view class="list-right-content">
								<span>{{item.text}}</span>
							</view>
						</view>
					</view>
				</view>
				<view class="content-question-btn" @click="goapplyquestion">
					<img :src="queryImage(`homelogo9`)" mode="aspectFill" alt="" class="question-btn-img">
					<span>我要当答主</span>
				</view>
			</view>
			<!-- 查看答主 -->
			<view class="home-content-view">
				<view class="content-view-body">
					<view class="view-body-top">
						<span class="body-toptitle"> <span style="color: #fff;">已认证100位</span>，专业领域人士成为答主</span>
						<span>为社区解答超过<span style="color: #fff;font-size: 40rpx;">10万+</span>专业提问</span>
					</view>
					<view class="view-body-card">
						<swiper class="swipertwo" circular :autoplay="true" interval="3000" duration="500"
							@change="swiperchangetwo">
							<swiper-item v-for="(item,index) in answerList" :key="item.id">
								<popularCard :carddata="item" :height="height"></popularCard>
							</swiper-item>
						</swiper>
						<view class="content-header-dots">
							<view class="header-dots" :class="dotindextwo === index ? 'header-dot-active' : ''"
								v-for="(item,index) in answerList" :key="item.id"></view>
						</view>
					</view>
					<view class="view-body-btn" @click="gomainquestionlist">
						<span>查看更多答主</span>
					</view>
				</view>
			</view>
			<!-- 问答助手图片 -->
			<view class="home-content-answers">
				<img mode="aspectFill" :src="queryImageCard(`indexcard2`)" alt="" class="content-answers-img">
			</view>
			<!-- 内筒最底部 -->
			<view class="home-content-bottom">
				<view class="content-bottom-top">
					<view class="bottom-top-left">
						<img :src="queryImage(`homelogo10`)" alt="" class="top-left-img">
						<span>乐知小程序</span>
						<span class="top-left-text">与你一同构建学习社区</span>
						<view class="top-left-btn">
							<span>添加到我的小程序</span>
						</view>
					</view>
					<view class="bottom-top-right">
						<img :src="queryImage(`homelogo11`)" alt="" class="top-right-img">
						<span>关注公众号</span>
						<img :src="queryImage(`homelogo12`)" alt="" class="top-right-logo">
					</view>
				</view>
				<view class="content-bottom-logoo">
					<img :src="queryImage(`homelogo13`)" alt="" class="bottom-logoo-img">
				</view>
				<view class="content-bottom-title">
					<span>乐&emsp;学&emsp;乐&emsp;知&emsp;·&emsp;越&emsp;学&emsp;越&emsp;知</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import methods from "./methods.js"
	import {
		mapState
	} from 'vuex' //引入mapState
	export default {
		data() {
			return {
				carddata: [],
				height: '380rpx',
				cardlist: [],
				downblean: false,
				answerList: [],
				dotindex: 0,
				dotindextwo: 0,
				questionlist: [{
					id: '1',
					next: '01',
					text: '可上传您的演奏视频、语音、图片或文字内容进行提问。默认免费提问，社区所有人可回答',
					title: '视频提问'
				}, {
					id: '2',
					next: '02',
					text: '可选择免费提问或悬赏提问，免费提问会在社区公开问题邀请回答。悬赏提问可选择认证答主来回答提问',
					title: '免费与悬赏'
				}, {
					id: '3',
					next: '03',
					text: '通过平台认证资深专业老师，提问将推送给他们，并进行专业解答。解答方式有图文形式、视频、语音等，解答后将根据平台规则获得奖励',
					title: '专业回答'
				}],
				swiperlist: [{
					id: "1",
					name: '立即提问',
					title: '专注于器乐演奏的问答社区同乐友分享与解答'
				}, {
					id: "2",
					name: '立即提问',
					title: '专注于器乐演奏的问答社区同乐友分享与解答'
				}],
				startcoordinate: 0,
			};
		},
		onLoad() {
			this.getData()
			uni.getStorage({
				key: 'userInfo',
				success: function(res) {
					console.log("1111", res.data.wx_mini_openid);
					if (res.data.wx_mini_openid != "" || res.data.wx_mini_openid != null) {

						uni.switchTab({
							url: '/pages/index/index'
						})

					} else {
						console.log("还在原来页面");
					}
				}
			});

		},
		computed: {
			...mapState({
				homeswiperlogo: state => state.remote?.homeswiperlogo?.data_list ?? [],
				homelog: state => state.remote?.homelog?.data_list ?? [],
				indexcard: state => state.remote?.indexcard?.data_list ?? [],
			})
		},
		mounted() {
			this.querySectionsIcon().then(res => {
				this.questionlist.map(item => {
					if (item.id == '1') {
						item.img = this.queryImage("homelogo5")
					}
					if (item.id == '2') {
						item.img = this.queryImage("homelogo6")
					}
					if (item.id == '3') {
						item.img = this.queryImage("homelogo7")
					}
				})
			});
		},
		methods: {
			...methods,
			queryImage(label, key = "homelog") {
				return this[key]?.find(res => res?.label == label)?.img?.url;
			},
			queryImageCard(label, key = "indexcard") {
				return this[key]?.find(res => res?.label == label)?.img?.url;
			},
			// 发送请求获取答主信息
			getData() {
				this.$store.dispatch('remote/callActionflowOffset', {
					response_key: "getAnswerInfo",
					actionflow_name: "用户_答主信息",
					payload: {
						offset: this.offset,
						limit: this.limit,
					},
				}).then(res => {
					let score_list = []
					this.cardlist = JSON.parse(JSON.stringify(res.data.list))
					let time = Math.round(new Date())
					let zanlinkNum = 0
					this.cardlist.map(item => {
						item.tag_list = JSON.parse(item.tag_list)
						item.zanlinkList.map(eitem => {
							if (Math.abs(time - new Date(this.$utils.dateFormat(eitem.updated_at,
									"yyyy-MM-dd")) <= (30 * 24 * 60 * 60 * 1000))) {
								if (eitem.zanlink) {
									zanlinkNum = zanlinkNum + eitem.zanlink
									item[`zanlinkNum`] = zanlinkNum
								}
							}
						})
					})
					//第一层先进行筛选，找到有评分的回答者
					for (let i in this.cardlist) {
						if (this.cardlist[i].article_comment_score_aggregate.aggregate.avg.score != null) {
							this.cardlist[i].article_comment_score_aggregate.aggregate.avg.score = this.cardlist[i]
								.article_comment_score_aggregate.aggregate.avg.score.toFixed(2)
							score_list.push(this.cardlist[i])
						}
					}
					console.log('分数排名', score_list);
					//不满足五个用户的情况
					if (score_list.length < 5) {
						//先进行冒泡排序
						this.bubbleSort(score_list)
						for (let i in this.cardlist) {
							if (this.cardlist[i].article_comment_score_aggregate.aggregate.avg.score == null &&
								score_list.length < 5) {
								score_list.push(this.cardlist[i])
							}
						}

						this.answerList = score_list
					}
					//满足五个的情况
					else {
						this.bubbleSort(score_list)
						for (let i = 0; i < 5; i++) {
							this.answerList.push(score_list[i])
						}
					}
					console.log('认证的答主', this.cardlist);
				}).catch(err => {
					console.log('失败了,,,')
				})
			},
			//排序
			bubbleSort(list) {
				var len = list.length
				for (let i = 0; i < len; i++) {
					for (let j = 0; j < len - 1 - i; j++) {
						if (list[j].article_comment_score_aggregate.aggregate.avg.score < list[j + 1]
							.article_comment_score_aggregate.aggregate.avg.score) {
							var t = list[j + 1]
							list[j + 1] = list[j]
							list[j] = t
						}
					}
				}
			},

			// 跳转到搜索页面
			gosearch() {
				uni.navigateTo({
					url: "/pages_a/indexsearch/indexsearch"
				})
			},
			/* 跳转到提问页面 */
			goquestion() {
				uni.switchTab({
					url: '/pages/question/question'
				})
			},
			//跳转到首页
			goquestion2() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			/* 跳转到我要当答主 */
			goapplyquestion() {
				uni.redirectTo({
					url: "/pages_a/applyquestion/applyquestion"
				})
			},
			/* 跳转到更多答主 */
			gomainquestionlist() {
				uni.switchTab({
					url: '/pages/mainquestionlist/mainquestionlist'
				})
			},
			swiperchange(e) {
				this.dotindex = e.detail.current;
			},
			swiperchangetwo(e) {
				this.dotindextwo = e.detail.current;
			},
			changedownblean() {
				this.downblean = true
			},
			/* 监听用户滑动事件 */
			/* 开始时 */
			start(e) {
				this.startcoordinate = e.changedTouches[0].clientY
			},
			move(event) {
				if (this.startcoordinate > event.touches[0].clientY + 100) {
					this.downblean = true
				}
			}
		}
	}
</script>

<style lang="scss">
	.home-page {
		background-color: #F4F4F4;
		width: 100%;
		height: 100%;


		.home-page-swiperheader {
			width: 100%;
			height: 100vh;
			// background-color: red;
			position: relative;

			.swiper {
				width: 100%;
				height: 100%;
				position: relative;

				.page-swiperheader-title {
					position: absolute;
					top: 180rpx;
					height: 120rpx;
					box-sizing: border-box;
					padding-left: 40rpx;
					border-left: 10rpx solid #F09500;
					font-size: 50rpx;
					font-family: Source Han Sans CN-Bold, Source Han Sans CN;
					font-weight: 700;
					color: #000000;
					line-height: 64rpx;
					margin-left: 36rpx;
				}

			}

			.home-page-btn {
				position: absolute;
				width: 325rpx;
				height: 80rpx;
				background: #F09500;
				border-radius: 100rpx 100rpx 100rpx 100rpx;
				font-size: 32rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				bottom: 10%;
				left: 25%;
				transform: translateX(-50%);

				.page-btn-logo {
					width: 35rpx;
					height: 32rpx;
					margin-right: 15rpx;
				}
			}

			.home-page2-btn {
				position: absolute;
				width: 325rpx;
				height: 80rpx;
				background: #999999;
				border-radius: 100rpx 100rpx 100rpx 100rpx;
				font-size: 32rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				bottom: 10%;
				left: 75%;
				transform: translateX(-50%);

				.page-btn-logo {
					width: 35rpx;
					height: 32rpx;
					margin-right: 15rpx;
				}
			}

			.content-header-dots {
				width: 24rpx;
				height: 8rpx;
				display: flex;
				justify-content: space-between;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: 8%;

				.header-dots {
					width: 8rpx;
					height: 8rpx;
					border-radius: 50%;
					background-color: #fff;
					z-index: 99;
				}

				.header-dot-active {
					background-color: #f09603;
				}
			}

			.swiperheader-bootom-dowm {
				position: absolute;
				bottom: 2%;
				left: 50%;
				transform: translateX(-50%);
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 45rpx;

				.bootom-dowm-img {
					width: 45rpx;
					height: 25rpx;
					margin-top: 10rpx;
				}
			}
		}

		.home-page-content {
			width: 100%;
			padding: 30rpx 27rpx 0 27rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			align-items: center;

			/* 搜索 */
			.home-content-search {
				width: 100%;
				position: relative;

				.content-search-inpt {
					height: 70rpx;
					background: #FFFFFF;
					border-radius: 30rpx 30rpx 30rpx 30rpx;
					opacity: 0.95;
					border: 1rpx solid rgba(0, 0, 0, 0.1);
					width: 100%;
					box-sizing: border-box;
					padding-left: 40rpx;
				}

				.content-search-logo {
					width: 40rpx;
					height: 40rpx;
					position: absolute;
					right: 30rpx;
					top: 50%;
					transform: translateY(-50%);
				}
			}

			/* banner */
			.home-content-banner {
				width: 106%;
				// height: 240rpx;
				border-radius: 15rpx 15rpx 15rpx 15rpx;
				margin: 20rpx 0;

				.content-banner-logo {
					width: 100%;
					height: 240rpx;
				}
			}

			/* 我要当答主 */
			.home-content-question {
				width: 100%;
				background-color: #fff;
				box-sizing: border-box;
				padding: 31rpx 0 59rpx 0;
				border: 1rpx dashed #ccc;
				border-radius: 15rpx;
				height: 900rpx;
				z-index: 999;

				.content-question-title {
					width: 100%;
					text-align: center;
					font-size: 36rpx;
					font-family: Alibaba PuHuiTi 2.0-85 Bold, Alibaba PuHuiTi 20;
					font-weight: 700;
					color: #000000;
					line-height: 42rpx;
					margin-bottom: 48rpx;
				}

				.content-question-body {
					width: 100%;
					box-sizing: border-box;
					padding: 0 58rpx 0 48rpx;

					.question-body-list {
						width: 100%;
						display: flex;
						margin-bottom: 12rpx;

						.body-list-left {
							width: 70rpx;
							display: flex;

							.list-left-img {
								width: 70rpx;
								height: 70rpx;
							}
						}

						.body-list-midel {
							width: 110rpx;
							box-sizing: border-box;
							padding-left: 47rpx;

							.list-midel-img {
								height: 70rpx;
								width: 20rpx;
							}
						}

						.body-list-right {
							font-size: 20rpx;
							font-family: Alibaba PuHuiTi 2.0-85 Bold, Alibaba PuHuiTi 20;
							font-weight: 700;
							color: #666666;
							line-height: 25rpx;
							// width: 100%;
							flex: 1;

							.list-right-top {
								font-size: 18rpx;
								font-weight: 500;
								color: #999999;
							}

							.list-right-nav {
								font-size: 30rpx;
								color: #000000;
								font-family: Alibaba PuHuiTi 2.0-85 Bold, Alibaba PuHuiTi 20;
								width: 100%;
								display: flex;
								justify-content: space-between;
								align-items: flex-start;
								line-height: 35rpx;
								margin: 10rpx 0;

								.right-nav-details {
									width: 110rpx;
									height: 26rpx;
									background: #A2B1A2;
									border-radius: 10rpx;
									text-align: center;
									font-size: 18rpx;
									font-family: AlibabaPuHuiTi-Medium, AlibabaPuHuiTi;
									font-weight: 500;
									color: #FFFFFF;
									line-height: 26rpx;
								}

							}

							.list-right-content {
								width: 100%;
							}
						}
					}
				}

				.content-question-btn {
					width: 355rpx;
					height: 80rpx;
					background: #F09500;
					border-radius: 80rpx;
					font-size: 36rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 42rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					margin: 0 auto;
					margin-top: 78rpx;

					.question-btn-img {
						width: 40rpx;
						height: 40rpx;
						margin-right: 16rpx;
					}
				}
			}

			/* 查看答主 */
			.home-content-view {
				width: 750rpx;
				height: 900rpx;
				position: relative;
				background: #F09500;
				border-radius: 0rpx 0rpx 0rpx 1000rpx;
				margin-top: -80rpx;

				.content-view-body {
					width: 100%;
					height: 100%;
					position: absolute;
					// background-color: red;
					box-sizing: border-box;
					padding: 154rpx 0 36rpx 0;

					.view-body-top {
						font-size: 36rpx;
						font-family: Alibaba PuHuiTi 2.0-85 Bold, Alibaba PuHuiTi 20;
						font-weight: 700;
						color: #000000;
						line-height: 50rpx;
						display: flex;
						flex-direction: column;
						text-align: center;

						.body-toptitle {
							margin-bottom: 22rpx;
						}
					}

					.view-body-card {
						width: 100%;
						box-sizing: border-box;
						padding: 0 27rpx;
						margin-top: 57rpx;

						.swipertwo {
							width: 100%;
							height: 380rpx;
						}

						.content-header-dots {
							// width: 24rpx;
							height: 8rpx;
							display: flex;
							justify-content: center;
							margin: 0 auto;
							margin-top: 20rpx;

							.header-dots {
								width: 8rpx;
								height: 8rpx;
								border-radius: 50%;
								background-color: #fff;
								z-index: 99;
								margin: 0 4rpx;
								opacity: 0.4;
							}

							.header-dot-active {
								opacity: 1;
							}
						}
					}

					.view-body-btn {
						margin: 0 auto;
						width: 454rpx;
						height: 79rpx;
						background: #FFFFFF;
						border-radius: 80rpx 80rpx 80rpx 80rpx;
						opacity: 1;
						border: 1rpx solid #AAAAAA;
						text-align: center;
						font-size: 30rpx;
						font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
						font-weight: 500;
						color: #999999;
						line-height: 79rpx;
						margin-top: 36rpx;
					}
				}
			}

			/* 问答助手图片 */
			.home-content-answers {
				width: 100%;
				margin-top: 79rpx;
				margin-bottom: 76rpx;

				.content-answers-img {
					width: 100%;
					height: 388rpx;
					border-radius: 15rpx;
				}
			}

			/* 内容最底部 */
			.home-content-bottom {
				width: 750rpx;
				height: 939rpx;
				background: #FFFFFF;
				box-sizing: border-box;
				padding: 70rpx 27rpx 140rpx 27rpx;

				.content-bottom-top {
					width: 100%;
					display: flex;
					justify-content: space-between;

					.bottom-top-left {
						font-size: 36rpx;
						font-family: Alibaba PuHuiTi 2.0-85 Bold, Alibaba PuHuiTi 20;
						font-weight: 700;
						color: #000000;
						line-height: 42rpx;
						width: 335rpx;
						height: 400rpx;
						background: #EBEBEB;
						border-radius: 15rpx 15rpx 15rpx 15rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						box-sizing: border-box;
						padding: 41rpx 0;

						.top-left-img {
							width: 80rpx;
							height: 80rpx;
							margin-bottom: 22rpx;
						}

						.top-left-text {
							font-size: 24rpx;
							font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
							font-weight: 500;
							color: #666666;
							line-height: 34rpx;
							display: inline-block;
							width: 141rpx;
							text-align: center;
							margin-top: 15rpx;
							margin-bottom: 31rpx;
						}

						.top-left-btn {
							width: 280rpx;
							height: 60rpx;
							background: #FFFFFF;
							border-radius: 50rpx 50rpx 50rpx 50rpx;
							opacity: 1;
							border: 1rpx solid #000000;
							margin: 0 auto;
							text-align: center;
							font-size: 24rpx;
							font-family: Source Han Sans CN-Bold, Source Han Sans CN;
							font-weight: 700;
							color: #000000;
							line-height: 60rpx;
						}
					}

					.bottom-top-right {
						font-size: 36rpx;
						font-family: Alibaba PuHuiTi 2.0-85 Bold, Alibaba PuHuiTi 20;
						font-weight: 700;
						color: #000000;
						line-height: 42rpx;
						width: 335rpx;
						height: 400rpx;
						background: #EBEBEB;
						border-radius: 15rpx 15rpx 15rpx 15rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						box-sizing: border-box;
						padding: 41rpx 0;

						.top-right-img {
							width: 80rpx;
							height: 80rpx;
							margin-bottom: 22rpx;
						}

						.top-right-logo {
							width: 140rpx;
							height: 140rpx;
							margin-top: 34rpx;
						}
					}
				}

				.content-bottom-logoo {
					width: 240rpx;
					height: 135rpx;
					margin: 0 auto;
					margin-top: 106rpx;

					.bottom-logoo-img {
						width: 240rpx;
						height: 135rpx;
					}
				}

				.content-bottom-title {
					width: 100%;
					text-align: center;
					font-size: 41rpx;
					font-family: Alibaba PuHuiTi 2.0-85 Bold, Alibaba PuHuiTi 20;
					font-weight: 500;
					color: #000000;
					line-height: 42rpx;
					margin-top: 40rpx;
				}
			}
		}
	}
</style>